<template>
    <div class="hot-board">
        <!-- 顶部栏 -->
        <div class="header-bar">
            <div class="header-left">
                <img class="hot-icon" src="https://so1.360tres.com/t01a815bd3d379e2381.jpg" alt="icon" />
                <div class="header-title">
                    <h2 style="font-size:28px;">今日热榜</h2>
                    <p class="sub-title">汇聚全网热点，热门榜单聚焦</p>
                </div>
            </div>
            <div class="header-right">
                <div class="time-block">
                    <div class="time-now">{{ currentTime }}</div>
                    <div class="time-desc">{{ lunarDate }}</div>
                </div>
                <div class="action-btns">
                    <button title="刷新"><i class="icon">⟳</i></button>
                    <button title="夜间模式"><i class="icon">🌙</i></button>
                    <button title="设置"><i class="icon">⚙️</i></button>
                </div>
            </div>
        </div>
        <div class="board-grid">
            <div class="board-card" v-for="(board, index) in boardList" :key="index">
                <!-- 加载中遮罩 -->
                <div v-if="board.loading" class="loading-mask">
                    <i class="loading-icon">⟳</i>
                </div>
                <!-- 标题栏 -->
                <div class="board-header">
                    <div class="board-header-left">

                        <img v-if="board.icon" :src="`${baseUrl}${board.icon}`" alt="logo" class="board-icon" />
                        <span class="board-title">{{ board.title }}</span>
                    </div>
                    <span class="board-tag">{{ board.tag }}</span>
                </div>

                <!-- 榜单内容（支持内部滚动） -->
                <ul class="board-items">
                    <template v-if="board.items.length > 0">
                        <li v-for="(item, i) in board.items" :key="i" class="board-item"  @click="onToNewsDetails(item)">
                            <span class="rank">{{ i + 1 }}</span>
                            <span class="text">{{ item.title }}</span>
                        </li>
                    </template>

                    <template v-else>
                        <el-empty :image-size="100"></el-empty>
                    </template>
                </ul>

                <!-- 底部信息 -->
                <div class="board-footer">
                    <span class="update-time">🕒 {{ getRelativeTime(board.lastUpdate) }}</span>
                    <i class="el-icon-refresh" @click="refreshBoard(index)" style="font-size: 18px;"></i>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getNewsTop10 } from '@/api/news'
export default {
    data() {
        return {
            baseUrl: process.env.VUE_APP_BASE_API,
            currentTime: '',
            timer: null,
            timer1: null,
            boardList: [
                {
                    title: "新浪微博",
                    tag: "财经",
                    icon: "/upload/xlwb.png",
                    lastUpdate: new Date(Date.now() - 5 * 60 * 1000), // 5分钟前
                    items: [
                        {
                            title: '2025年度热词有哪些？',
                            url: '2025年度热词有哪些？'
                        }
                        // "2025年度热词有哪些？", "AI 辅助编程进入主流了吗？", "为什么年轻人越来越喜欢简约生活？",
                        // "知乎盐选内容增长报告", "程序员如何系统学习AI？", "有哪些值得收藏的知乎回答？",
                        // "大学生如何规划职业路径？", "2025最受关注的科技趋势", "知乎高赞摄影作品集", "职场新人如何快速融入团队？"
                    ],
                    loading: false
                },
                {
                    title: "抖音",
                    tag: "热榜",
                    icon: "/upload/dy.png",
                    lastUpdate: new Date(Date.now() - 60 * 60 * 1000), // 1小时前
                    items: [
                        // "短剧播放量突破2000亿次", "DIY建房挑战赛爆火", "年度最火BGM合集",
                        // "抖音电商成交额创新高", "网友自制AI短片登热榜", "旅行vlog最受欢迎榜单",
                        // "百万粉丝创作者访谈", "挑战24小时无手机生活", "AI变脸技术引发热议", "宠物短视频人气榜TOP10"
                    ],
                    loading: false
                },
                {
                    title: "新浪微博",
                    tag: "热搜",
                    icon: "/upload/xlwb.png",
                    lastUpdate: new Date(Date.now() - 3 * 60 * 60 * 1000), // 3小时前
                    items: [
                        // "2025年高考报名人数再创新高", "寒潮来袭全国气温骤降", "刘德华演唱会全程回放",
                        // "新能源车销量突破新纪录", "中美科技企业合作消息", "年度十大热搜榜单发布",
                        // "世界杯预选赛最新战况", "AI 搜索功能上线公测", "流感疫苗接种提醒", "春运购票系统升级完成"
                    ],
                    loading: false
                },
                {
                    title: "澎湃新闻",
                    tag: "热榜",
                    icon: "/upload/pp.png",
                    lastUpdate: new Date(Date.now() - 2 * 60 * 60 * 1000),
                    items: [
                        // "AI创业公司融资潮再起", "字节跳动新业务曝光", "SaaS行业迎来洗牌期",
                        // "OpenAI 最新动态汇总", "消费科技投融资周报", "电商新趋势：兴趣推荐",
                        // "创业者该如何抓住AI红利", "国内创投市场回暖信号", "Web3生态布局进展", "自动驾驶行业观察"
                    ],
                    loading: false
                },
                {
                    title: "网易新闻",
                    tag: "热榜",
                    icon: "/upload/wy.png",
                    lastUpdate: new Date(Date.now() - 30 * 60 * 1000),
                    items: [
                        // "本周值得关注的效率应用", "Android 15 Beta 体验报告", "macOS 15 实用技巧合集",
                        // "App Store 年度榜单预测", "Notion 模板分享", "数字生活趋势观察",
                        // "RSS 工具推荐合集", "如何打造高效工作环境", "少数派编辑精选文章", "设计师必备小工具清单"
                    ],
                    loading: false
                },
                {
                    title: "CSDN",
                    tag: "热榜",
                    icon: "/upload/csdn.png",
                    lastUpdate: new Date(Date.now() - 10 * 60 * 1000),
                    items: [
                        // "小米15系列正式发布", "苹果M4芯片性能曝光", "Redmi K70 开售即售罄",
                        // "WiFi 7 设备全面普及", "华为新系统Beta测试", "荣耀发布全新平板系列",
                        // "英伟达AI显卡供不应求", "三星S25设计曝光", "AI手机拍照功能对比", "国内芯片量产进展"
                    ],
                    loading: false
                }
            ]
        }
    },
    methods: {
        /**
         * 跳转到 新闻详情页面
         */
        onToNewsDetails(row){
            console.log('跳转到新闻详情页面，row=',row)

            window.open(row.url);
        },
        getData() {
            // 页面初始加载时，全部卡片都显示 loading
            this.boardList.forEach(board => board.loading = true);

            let param = {}
            getNewsTop10(param).then(res => {
                if (res && res.data.code === 200 && res.data.data) {
                    const dataMap = {
                        0: 'XINLANGB',
                        1: 'DOUYIN',
                        2: 'XINLANGNEWS',
                        3: 'PENGPAI',
                        4: 'WANGYIXINWEN',
                        5: 'CSDN'
                    }

                    // 遍历每个板块，赋值数据并关闭 loading
                    Object.keys(dataMap).forEach(index => {
                        const i = Number(index)
                        this.boardList[i].items = res.data.data[dataMap[i]] || []
                        this.boardList[i].loading = false
                        this.boardList[i].lastUpdate = new Date()
                    })
                    console.log('newsList=')
                    console.log(this.boardList[0])
                } else {
                    this.$message.error(res.data.message)
                    // 如果接口失败，也关闭 loading 避免一直显示
                    this.boardList.forEach(board => board.loading = false)
                }
            }).catch(err => {
                console.error(err)
                this.$message.error('数据加载失败')
                this.boardList.forEach(board => board.loading = false)
            })
        },
        toNewsDetails() {
            this.$router.push({
                name: 'newDetails'
            })
        },
        getRelativeTime(time) {
            const diff = (Date.now() - new Date(time)) / 1000
            if (diff < 60) return "刚刚更新"
            if (diff < 3600) return Math.floor(diff / 60) + "分钟前更新"
            if (diff < 86400) return Math.floor(diff / 3600) + "小时前更新"
            return Math.floor(diff / 86400) + "天前更新"
        },
        getRelativeTime(time) {
            const diff = (Date.now() - new Date(time)) / 1000
            if (diff < 60) return "刚刚更新"
            if (diff < 3600) return Math.floor(diff / 60) + "分钟前更新"
            if (diff < 86400) return Math.floor(diff / 3600) + "小时前更新"
            return Math.floor(diff / 86400) + "天前更新"
        },
        async refreshBoard(index) {

            // 设置卡片 loading
            this.boardList[index].loading = true;

            try {
                const res = await getNewsTop10({}); // 你自己的接口
                if (res && res.data.code === 200 && res.data.data) {
                    // 根据 index 更新对应板块
                    switch (index) {
                        case 0: this.boardList[0].items = res.data.data.XINLANGB || []; break;
                        case 1: this.boardList[1].items = res.data.data.DOUYIN || []; break;
                        case 2: this.boardList[2].items = res.data.data.XINLANGNEWS || []; break;
                        case 3: this.boardList[3].items = res.data.data.PENGPAI || []; break;
                        case 4: this.boardList[4].items = res.data.data.WANGYIXINWEN || []; break;
                        case 5: this.boardList[5].items = res.data.data.CSDN || []; break;
                    }
                    this.boardList[index].lastUpdate = new Date();
                } else {
                    this.$message.error(res.data.message)
                }
            } catch (error) {
                console.error(error);
                this.$message.error('刷新失败')
            } finally {
                // 关闭 loading
                this.boardList[index].loading = false;
            }
        },
        updateTime() {
            const now = new Date()
            const pad = n => n.toString().padStart(2, '0')
            const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
            this.currentTime = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`
            this.lunarDate = `农历十月十三 ${week[now.getDay()]}` // 这里示意写死，可改成动态农历
        }
    },
    mounted() {
        this.updateTime()
        this.timer = setInterval(this.updateTime, 1000)

        this.getData()

        // 每隔5分钟刷新一次数据（可根据需求调整间隔）
        this.timer1 = setInterval(() => {
            this.getData();
        }, 30 * 1000);
    },
    beforeDestroy() {
        clearInterval(this.timer)

        // 清除定时器
        clearInterval(this.timer1);
    }
}
</script>

<style scoped>
.loading-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    z-index: 10;
}

.loading-icon {
    font-size: 24px;
    color: #007bff;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.board-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.board-icon {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    object-fit: cover;
}

/* ===== 顶部栏 ===== */
.header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    padding: 10px 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}

.header-left {
    display: flex;
    align-items: center;
}

.hot-icon {
    width: 42px;
    height: 42px;
    margin-right: 10px;
}

.header-title h2 {
    margin: 0;
    font-size: 20px;
    color: #222;
    font-weight: bold;
}

.sub-title {
    font-size: 16px;
    color: #888;
    margin: 2px 0 0 0;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.time-block {
    text-align: right;
}

.time-now {
    font-size: 14px;
    color: #333;
}

.time-desc {
    font-size: 12px;
    color: #888;
}

.action-btns {
    display: flex;
    gap: 10px;
}

.action-btns button {
    border: none;
    background: #f3f4f6;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    transition: background 0.2s;
}

.action-btns button:hover {
    background: #e1e3e8;
}

.icon {
    font-size: 18px;
}

.hot-board {
    padding: 20px;
    background: #f5f6fa;
    font-family: "Microsoft YaHei", sans-serif;
}

/* 标题栏 + 当前时间 */
.board-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

h2 {
    text-align: left;
    color: #333;
    font-size: 24px;
    margin-bottom: 20px;
}

.board-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

.current-time {
    font-size: 14px;
    color: #666;
    font-family: "Courier New", monospace;
}

/* 卡片样式 */
.board-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 320px;
    /* 固定高度 */
    transition: all 0.2s;
}

.board-card:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* 标题栏 */
.board-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.board-title {
    font-weight: bold;
    font-size: 18px;
    color: #222;
}

.board-tag {
    background: #f44336;
    color: white;
    font-size: 12px;
    border-radius: 4px;
    padding: 2px 6px;
}

/* 内容区域滚动 */
.board-items {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    overflow-y: auto;
    /* 内部滚动 */
}

/* 滚动条样式 */
.board-items::-webkit-scrollbar {
    width: 6px;
}

.board-items::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

.board-items::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

.board-item {
    display: flex;
    align-items: center;
    padding: 4px 0;
}

.rank {
    color: #f44336;
    font-weight: bold;
    margin-right: 8px;
    width: 18px;
}

.text {
    color: #333;
    flex: 1;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
}

.text:hover {
    color: #007bff;
}

/* 底部信息栏 */
.board-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #999;
    border-top: 1px solid #eee;
    margin-top: 10px;
    padding-top: 6px;
}

.update-btn {
    background: #007bff;
    border: none;
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.update-btn:hover {
    background: #0056b3;
}
</style>
